import { View, Image, Text } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro';

import { useTabBarStore } from '@/store/store'
import './index.scss'

const playerMenuList = [
  {
    pagePath: 'pages/Home/index',
    normal: require('./images/home.png'),
    active: require('./images/home_active.png'),
    text: '首页'
  },
  {
    pagePath: 'pages/Hospital/index',
    normal: require('./images/hospital.png'),
    active: require('./images/hospital_active.png'),
    text: '医院'
  },
  {
    pagePath: 'pages/AI/index',
    normal: require('./images/ai.png'),
    active: require('./images/ai_active.png'),
    text: 'AI先知'
  },
  {
    pagePath: 'pages/Data/index',
    normal: require('./images/data.png'),
    active: require('./images/data_active.png'),
    text: '疾控数据'
  },
  {
    pagePath: 'pages/User/index',
    normal: require('./images/user.png'),
    active: require('./images/user_active.png'),
    text: '我的'
  },
]
function CustomTabBar() {

  const menuList = playerMenuList;
  const { activeIndex, setActive } = useTabBarStore();
  // const router = getCurrentInstance().router
  // const currentPath = router?.path
  // console.log(currentPath);

  Taro.eventCenter.on('logout', () => {
    setActive(0);
  })
  

  

  const renderMenu = () => {
    return menuList.map((menuItem, menuIndex) => {
      return (
        <View
          key={menuItem.pagePath}
          className="bar-container__item"
          onClick={() => { 
            Taro.switchTab({
              url: ('/' + menuItem.pagePath)
            });
            setActive(menuIndex);
          }}
        >
          <Image
            className='icon'
            src={activeIndex === menuIndex ? menuItem.active : menuItem.normal} 
          />
          <Text className={`text ${activeIndex === menuIndex ? 'text-active' : ''}`}>{menuItem.text}</Text>
        </View>
      )
    })
  }

  return (
    <View className="bar-container">
      {renderMenu()}
    </View>
  )
}

export default CustomTabBar